<template>
  <view class="component-container">
    <view class="base" :class="{ active: props.modelValue === 0 }" @click="change(0)">商品</view>
    <view class="base" :class="{ active: props.modelValue === 1 }" @click="change(1)">评价</view>
    <view class="base" :class="{ active: props.modelValue === 2 }" @click="change(2)">商家</view>
    <span style="color: #b8b8b8">|</span>
    <view><uni-icons type="search" size="16"></uni-icons>搜索</view>
    <receiving-method :super="shopBusinessType" v-model="chooseReceivingMethod" />
  </view>
</template>

<script setup lang="ts">
import { ref, inject, type Ref } from 'vue'
import ReceivingMethod from './receiving-method/index.vue'
import type { ShopInfo } from '@/types/response/shop'
import VarUtils from '@/utils/VarUtils'
function change(newCurrent: number) {
  emits('update:modelValue', newCurrent)
}
const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits<{
  (e: 'update:modelValue', current: number): void
}>()
// 获取父组件向下共享的店铺信息
const shopInfo = inject<Ref<ShopInfo>>('shopInfo')

// 经营类型(1只店食、2只配送  3店食与配送)
const shopBusinessType = VarUtils.await<ShopInfo, string>(shopInfo!, (shopInfo) => {
  return shopInfo.value?.businessType
})

// 用户选择的收货方式（自提/配送）
const chooseReceivingMethod = ref(1)
</script>

<style scoped lang="scss">
.component-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  height: 100%;
  font-size: 30rpx;
  background-color: #fff;

  .base {
    padding-bottom: 7rpx;
    border-top: 3px solid #f4f4f400;
    border-bottom: 3px solid #f4f4f400;
    box-sizing: border-box;
  }

  .active {
    border-bottom: 3px solid #fcce49;
  }
}
</style>
